<script lang="tsx">
import {ElDialog} from 'element-plus';
import {defineComponent, onMounted, reactive, watch} from 'vue';
import Icon from '@/components/icon/icon.vue';
import api from '@/api';
import utils from '@/utils';
import {useMainStore} from '@/stores/mainStore';


export default defineComponent({
  props: {
    messageShow: {type: Boolean, default: false, description: '是否开启弹窗'},
    setMessageShow: {type: Function, default: () => { }, description: '关闭弹窗'},
  },

  setup(props: any) {

    const mainStore = useMainStore();

    const state = reactive({
      tableData: [] as any[],
      count: 0,
      underType: 0,
      loading: false,
      page: 1,
      page_size: 15,
      finished: false,
      applyMap: {
        0: '请假申请',
        1: '出差申请',
        2: '用章申请',
        3: '合同申请',
        4: '报销申请',
        5: '备用金借款申请',
        6: '预算申请',
        7: '请假汇总'
      } as any,
      auditMap: {
        0: '请假审核',
        1: '出差审核',
        2: '用章审核',
        3: '合同审核',
        4: '报销审核',
        5: '备用金借款审核',
        6: '预算审核'
      } as any
    })

    const initData = () => {
      state.loading = true;
      api.MessageList({page: state.page, page_size: state.page_size, is_read: state.underType}).then((res: any) => {
        state.loading = false;
        state.tableData = res.data.results;
        state.count = res.data.count;
      });
      mainStore.flushUnread();
    }

    watch(() => props.messageShow, (val) => {
      if (val) {
        initData();
      }
    })

    onMounted(() => {
      initData();
    })

    const changeUnderType = (type: number) => {
      state.page = 1;
      state.finished = false;
      state.underType = type;
      initData();
    }


    const loadMore = () => {
      if (!state.finished) {
        state.loading = true;
        api.MessageList({page: state.page + 1, page_size: 15, is_read: state.underType}).then((res: any) => {
          state.loading = false;
          if (!res.ResponseError && res.data.code !== -1) {
            state.page++;
            state.tableData = state.tableData.concat(res.data.results);
          }
          if (res.data.code === -1) {
            state.finished = true;
          }
        });
      }
    }

    const MessageItems = () => {

      const readClick = (id: number) => {
        api.MessageRead(id).then((res: any) => {
          if (!res.ResponseError) {
            initData();
          }
        });
      }

      const delClick = (id: number) => {
        api.MessageDelete(id).then((res: any) => {
          if (!res.ResponseError) {
            initData();
          }
        });
      }

      const jumpPath = (item: any) => {
        mainStore.jumpPath(item.status, item.type, item.bill);
        props.setMessageShow(false);
      }

      return <>
        {
          state.tableData?.map((item: any) => {
            return (
                <div class='items'>
                  <li>
                    <div class='icons'>
                      <Icon name='message' width={22} height={22}/>
                    </div>
                    <span>{item.title}</span>
                  </li>
                  <li>
                    <span class={[!item.is_read && 'rd']}>【{item.status === 0 ? state.applyMap[item.type] : state.auditMap[item.type]}】 </span>
                    <span class={[!item.is_read && 'rd']}> {item.is_read ? '【已读】' : '【未读】'} </span>
                    送达时间： {utils.formatTime(item.add_time)}
                  </li>
                  <li>
                    {!item.is_read && <el-button text size='small' onClick={() => readClick(item.id)}>已读</el-button>}
                    {item.is_read && <el-button text size='small' onClick={() => delClick(item.id)}>删除</el-button>}
                    <el-button size='small' text onClick={() => jumpPath(item)}>跳转</el-button>
                  </li>
                </div>
            )
          })
        }
      </>
    }

    return () => (
        <div class="menu-message-list">
          <ElDialog draggable lock-scroll={true} modelValue={props.messageShow} width={1000} beforeClose={() => props.setMessageShow(false)}>
            <div class='content'>
              <div class='left-box'>
                <div class='items items-active'>
                  <div class='icons'>
                    <Icon name='notice' width={15} height={15}/>
                  </div>
                  <span>消息通知</span>
                  {mainStore.unread && <li>
                    <el-badge value={mainStore.unread}></el-badge>
                  </li>}
                </div>
              </div>
              <div class='right-box'>
                <div class='right-top'>
                  <div class='i-vcenter'>
                    <div class='icons'>
                      <Icon name='notice' width={15} height={15}/>
                    </div>
                    <span>消息</span>
                  </div>
                  <div class='i-vcenter'>
                    <span class={['title', state.underType == 0 && 'title-active']} onClick={() => changeUnderType(0)}>未读</span>
                    <span class={['title', state.underType == 1 && 'title-active']} onClick={() => changeUnderType(1)}>已读</span>
                  </div>
                </div>
                <div class='right-under'>
                  <div class='list' v-loading={state.loading} element-loading-text='Loading...' v-infinite-scroll={loadMore} infinite-scroll-distance={50} infinite-scroll-delay={1000}>
                    <MessageItems/>
                    {(!state.tableData || state.tableData?.length == 0) && <el-empty style='margin-top:80px' description="空空如也"/>}
                  </div>
                </div>
              </div>
            </div>
          </ElDialog>
        </div>
    );
  },
});

</script>


<style lang="scss">
.menu-message-list {

  // 公共弹窗样式
  .el-dialog {
    --el-dialog-margin-top: 10vh;
    border-radius: 4px;
    height: 720px;
  }

  .el-dialog__header {
    margin-right: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0 !important;

    .el-dialog__headerbtn .el-dialog__close {
      color: #777;
    }

    .el-dialog__title {
      font-size: 16px;
      padding: 0 !important;
      color: #fff !important;
    }
  }

  .el-dialog__body {
    max-height: 75vh;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #628ff8;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    margin-left: 15px;
  }

  .content {
    width: 100%;
    height: 670px;
    display: flex;
    justify-content: space-between;

    .left-box {
      width: 25%;
      height: 100%;
      border-right: 2px solid #e6e6e6;
      display: flex;
      flex-direction: column;

      .items {
        height: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 15px;
        font-weight: bold;
        position: relative;

        &:hover {
          background: #F2F5F9;
          cursor: pointer;
        }

        &-active {
          background: #F2F5F9;
        }

        li {
          position: absolute;
          list-style: none;
          right: 20px;
          top: 22px;
          color: #fff;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }
    }

    .right-box {
      width: 75%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .right-top {
        height: 11%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;


        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 40px;
          margin: 0 20px;
          cursor: pointer;
          border-bottom: 2px solid rgba($color: #000000, $alpha: 0);
          font-size: 13px;
          position: relative;
          z-index: 3000;
          top: 1px;

          &:hover {
            border-bottom: 2px solid #165DFF;
          }

          &-active {
            border-bottom: 2px solid #165DFF;
          }
        }
      }

      .right-under {
        height: 89%;
        overflow-y: hidden;
        border-top: 1px solid #e6e6e6;

        // 取消滚动条
        &::-webkit-scrollbar {
          display: none;
        }

        .el-loading-parent--relative {
          pointer-events: auto;
        }


        .list {
          height: 100%;
          overflow-y: auto;

          // 消除滚动条的轨道颜色
          &::-webkit-scrollbar-track {
            cursor: pointer !important;
            background: none !important;
          }

          // 滚动条的宽度
          &::-webkit-scrollbar {
            width: 5px;
          }

          // 滚动条的颜色
          &::-webkit-scrollbar-thumb {
            background: #fcfcfc;
            border-radius: 5px;
          }


          .items {
            display: flex;
            flex-direction: column;
            list-style: none;
            padding: 25px;
            position: relative;
            border-bottom: 1px solid #f3f0f0;


            &:hover {

              li:nth-child(3) {
                display: flex;
              }
            }

            li:nth-child(1) {
              display: flex;
              font-size: 15px;
              align-items: center;
            }

            li:nth-child(2) {
              margin-left: 20px;
              margin-top: 20px;
              font-size: 12px;
              color: #999;

              .rd {
                color: #FF4D4F;
              }

              span:nth-child(2) {
                margin-right: 8px;
              }
            }

            li:nth-child(3) {
              display: none;
              justify-content: flex-end;
              position: absolute;
              right: 20px;
              top: 70px;

              .el-button {
                margin-left: 10px;
              }
            }

          }

        }
      }

    }
  }
}
</style>